<!DOCTYPE html>
<html manifest="http://aleonlinespot.altervista.org/manifest.php">
    <head>
        <meta charset="utf-8" />
        <title>MyPhotoMemories</title>

        <link rel="icon" href="img/favicons/icon32.png">
        <link rel="shortcut icon" href="img/favicons/icon32.png">
        <link rel="apple-touch-icon" href="img/favicons/icon57.png" sizes="57x57">
        <link rel="apple-touch-icon" href="img/favicons/icon114.png" sizes="114x114">
        <link rel="apple-touch-icon" href="img/favicons/icon72.png" sizes="72x72">
        <link rel="apple-touch-icon" sizes="80x80" href="img/favicons/icon80.png">
        <link rel="apple-touch-icon-precomposed" sizes="android-only" href="img/favicons/icon57.png">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <!-- jQuery mobile -->      
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>   
        <!-- jQuery url plugin -->
        <script type="text/javascript" src="../jQuery/jquery.url.js"></script>
        <!-- Gmaps for reverse geocoding -->
        <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA8vPFux0WblXQfMbOpgEbDKWCGh0cEt58&sensor=true">
        </script>
        <!-- model -->
        <script src="../model/photo.js"></script>
        <script src="../model/album.js"></script>
        <!-- view -->
        <script type="text/javascript" src="draw.js"></script>
        <script type="text/javascript" src="effects.js"></script>
        <!-- controller -->
        <script src="../controller/dbController.js"></script>
        <script src="../controller/fileController.js"></script>
        <script src="../controller/locationController.js"></script>
        <script src="../controller/cacheController.js"></script>
        <script src="../controller/supportController.js"></script>
        <!-- init script -->
        <script src="initViews.js"></script>


        <!-- css -->
        <link rel="stylesheet" href="css/myStyle.css" />
        <link rel="stylesheet" href="css/graphics.css" />

    </head>
    <body>
        <div data-role="page" id="albumView"> 

            <!-- init script -->
            <script>
                
                var p;
                var AVidx;
                var photos;
                var swiping = false;
                
                $("#albumView").bind("pagebeforeshow", function(){
                    console.log("albumView pagebeforeshow");

                    aid = sessionStorage.aid;
                    console.log("album view init: aid = "+aid);
                    
                    var album = dbCon.getAlbumFromId(aid);
                    photos = dbCon.getPhotoList(aid);
                    
                    $("#AValbumName").html(album.name);
                    $("#AValbumDescr").html(album.description);
                    
                    console.log("n photos: " + photos.length);
           
                });
                
                $("#albumView").bind("pageshow", function(){
                    console.log("AV pageshow");
                    AVidx = 0;
                    layoutAV();
                });

            </script>

            <div data-role="header">
                <div class="logo">
                    <img src="img/logo/logo.png" alt="MyPhotoMemories"/>
                    <div class="rightHeader">
                        <a href="index.html"  data-role="button" data-icon="home"  data-iconpos="notext"></a>
                        <!-- menu -->
                        <a href="dialog/AVpopupMenu.html" data-rel="dialog" data-role="button" data-icon="arrow-d"  data-iconpos="notext"></a>
                        <!-- *** -->
                    </div>
                </div>
                <div class="topBar lightGrey">
                    <h5 id="AValbumName">Name</h5>
                    <p id="AValbumDescr">Description</p>
                </div>
            </div>
            <div data-role="content" id ="AVimageShownParent">

                <div class="noPhotos">
                    This album is empty.
                </div>
                <div class="yesPhotos">
                    <a id="AVopenPhoto" href="photoView.html">
                        <img id="AVimageShown" class="fullscreen"/>
                    </a>
                </div>

            </div>

            <div  class="yesPhotos" data-role ="footer" data-position="fixed">
                <canvas id="AVphotoList" width="100" height="100">
                </canvas>
            </div>

        </div>  

    </body>
</html>

